WES BOS系列影片
Alex快速導讀系列影片

今天要來製作自己的影片撥放器，覺得原始的控制套件很醜?
那就自己做一個，不過作者已經幫我們做好樣式了。
我們還是注重在怎麼將這些寫好的樣式都用JS加上功能吧!

MDN-video
HTMLMediaElement
先開起來準備

會製作到的功能:

影片播放按鈕
設置快進或倒退按鈕
用拖拉的方式調整音量大小
用拖拉的方式調整播放速度
影片播放進度條

1.先抓出會使用到的元素們

const player = document.querySelector('.player');//撥放器本體
const video = player.querySelector('.viewer');//影片本體
const progress = player.querySelector('.progress');//影片撥放進度條外框
const progressBar = player.querySelector('.progress__filled');//影片撥放進度條內部
const toggle = player.querySelector('.toggle');//影片撥放按鈕
const skipButtons = player.querySelectorAll('[data-skip]');//快進或倒退按鈕
const ranges = player.querySelectorAll('.player__slider');//音量大小、播放速度

2.製作播放影片的功能。
最直覺的寫法如下，相信很容易理解
如果影片現在是停止狀態就播放影片，否則就暫停影片。

function togglePlay() {
  if(video.paused) {
    video.play()
  } else {
    video.pause()
  } 
}

但作者給了另一種更簡潔的寫法

function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

這邊用了中括號取key值的方法去執行。
key值包含了'play'與'pause'
用三元運算子去判斷現在method應該是'play'或'pause'
判斷後才代入中括號中執行。

3.綁定監聽器
點擊影片本身時會觸發togglePlay()
點擊播放按鈕時會觸發togglePlay()

video.addEventListener('click',togglePlay)
toggle.addEventListener('click',togglePlay)

4.播放影片時按鈕icon也需要做切換，製作切換按鈕的函式

function updateButton() {
  const icon = this.paused ? '►' : '❚ ❚';
  toggle.textContent = icon;
}

5.綁定監聽器

video.addEventListener('click',togglePlay)
video.addEventListener('play',updateButton)
video.addEventListener('pause',updateButton)

toggle.addEventListener('click',togglePlay)

6.設置快進或倒退按鈕，製作快進或倒退的函式
這邊利用在HTML中設置 data-*
讀取dataset設置好的數字，來做快進或倒退，只需要更改data-skip的值，就可以輕鬆的更改時間。

function skip() {
  video.currentTime += parseFloat(this.dataset.skip);
}

7.綁定監聽器

skipButtons.forEach(button => button.addEventListener('click', skip));

今天簡單的製作兩種功能，是否感覺也沒這麼難呢?
明天再繼續完成囉~